<!-- 藏品编目 -->
<script setup lang="ts">
import TableView from '@/components/TableView.vue'
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NPagination,
  useMessage,
  NInput,
  NSelect,
  NSpace,
  NTreeSelect,
  NModal,
  NTooltip,
  type DataTableColumns,
  type SelectOption
} from 'naive-ui'
import { h, ref, reactive, watch, onMounted, type VNode,onDeactivated} from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { sendRequest } from '@/utils/api'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import {createH} from '@/components/ButtonShowH/CreateH'
const message = useMessage()
const route = useRoute()
const form = reactive({
  batchName: null,
  batchCode:null,//批次编号
  storageStatusCode: null, //入藏状态
  receiver:null,//接收人
  collector:null,//藏家
  solicitMethodCode: null, //征集方式
  catalogStatus: null, //编目状态
})
const renderOption = ref(({ node, option }: { node: VNode; option: SelectOption }) =>
  h(NTooltip, null, {
    trigger: () => node,
    default: () => option.classificationName
  })
)
const rowKey: any = (e: any) => e.id || ''
const columns: DataTableColumns = [
  {
    title: '批次编号',
    key: 'batchCode',
    width: '6rem',
    align: 'center'
  },
  {
    title: '批次名称',
    key: 'batchName',
    width: '15rem',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '编目状态',
    key: 'catalogStatusName',
    width: '10rem',
    align: 'center',
    ellipsis: {
      tooltip: true
    },
    render:(e:any)=>{
    
      switch(e.catalogStatus){
        case 0:return '未编目';
        case 1:return '部分编目';
        case 2:return '完成编目';
        default:return;
      }
    }
  },
  {
    title: '征集方式',
    key: 'collectTypeName',
    width: '5rem',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '数量',
    key: 'itemNum',
    width: '5rem',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  
  {
    title: '藏家',
    key: 'collector',
    width: '6rem',
    align: 'center',
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '接收人',
    key: 'receiver',
    width: '6rem',
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    width: '10rem',
    align: 'center',
    fixed: 'right',
    render: (e: any) => [
      // h(
      //   NButton,
      //   {
      //     type: 'primary',
      //     quaternary: true,
      //     onClick: () => {
      //       router.push({
      //         path: '/collection/process/makeMenu/menu',
      //         query: { id: e.id, subItemCode: e.subItemCode, type: 1, code: e?.itemCode }
      //       })
      //     }
      //   },
      //   {
      //     default: () => '编目'
      //   }
      // ),
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: () => {
            router.push({
              path: '/collection/process/makeMenu/collectList',
              query: { id: e.id, batchCode: e.batchCode,redirect: router.currentRoute.value.fullPath}
            })
          }
        },
        {
          default: () => '编目'
        }
      ),
      
      // createH(NButton,false,()=>{console.log(111)},'提交初审'),
      // h(
      //   NButton,
      //   {
      //     type: 'primary',
      //     quaternary: true,
      //     onClick: () => {
      //       router.push({
      //         path: '/collection/process/makeMenu/processDetail',
      //         query: { id: e.subItemCode, type: 0, idSelf: e.id } //0 藏品编目详情 1 编目审核详情 2 藏品管理详情
      //       })
      //     }
      //   },
      //   {
      //     default: () => '详情'
      //   }
      // )
    ]
  }
]
const reset = () => {
  form.batchName = null
  form.batchCode = null
  form.receiver = null
  form.collector = null
  form.catalogStatus = null
  form.solicitMethodCode = null
  form.storageStatusCode = null
}
//筛选条件
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    queryTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    queryTableData(true)
  }
})
const piciList = ref()
const banbenList = ref()
// 捐赠、购买、交换、拨交、罚没、呈缴
const collectFactionList: any = ref()
const inStatusList = ref()
// 0 '未编目', 1 '部分编目', 2 '完成编目'
const statusList: any = ref([
  {value:0,label:'未编目'},
  {value:1,label:'部分编目'},
  {value:2,label:'完成编目'}
])
const shenheList: any = ref()
//删除
const modalVisible = ref(false)
// const againDelete = async () => {
//   const [error, res] = await sendRequest({
//     module: 'workBench',
//     api: '',
//     override: {
//       params: {
//         id: dataListSelections.value
//       }
//     }
//   })
//   if (error) return message.error(error.message)
//   message.success(res.data)
//   modalVisible.value = false
//   queryTableData()
// }
const againBack = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'collectItemsAssessSubAudit',
    override: {
      params: {
        subItemCode: handleId.value
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code == 500) message.error(res.msg)
  else {
    message.success(res.msg)
  }

  modalVisible.value = false
  queryTableData()
}
const handleId = ref() //
//提交初审
const handleDetail = (val: any, type: any) => {
  console.log(val)
  handleId.value = val
  if (type) handleId.value = null
  modalVisible.value = true
}

//多选框勾选
type DataListSelectionsItem = {
  id: string
}
const notIssuedId = ref()
const dataListSelections: any = ref<DataListSelectionsItem[]>([])
function selectionChangeHandle(val: any, info: any) {
  dataListSelections.value = val
  notIssuedId.value = []
  info.map((i: any) => {
    if (i.distributionStatus == '0') {
      notIssuedId.value.push(i.id)
    }
  })
}

//表格数据
const tableLoading = ref(false)
const tableData: any = ref()
const queryTableDataBefore = () => {
  queryTableData(true)
  // if (
  //   form.batchName ||
  //   form.catalogStatus ||
  //   form.solicitMethodCode||form.storageStatusCode
  // ) {
  //   queryTableData()
  // } else {
  //   message.info('请输入查询条件')
  // }
}
const queryTableData = async (resetPage = false) => {
  // tableData.value= Array(10).fill({id:1})
  // return
  if (resetPage) paginationReactive.page = 1
  tableLoading.value = true
  dataListSelections.value = []
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'qureyMakeMenuTableDataList',
    override: {
      params: {
        ...form,
        page: paginationReactive.page,
        limit: paginationReactive.pageSize,
        // key: 1 //1 初编 编目 2 编目审核 3 藏品
      }
    }
  })
  if (error) return message.error(error.message||'请求失败，请稍后再试')
  const tmp: any = res.data
  tableData.value = tmp?.list
  paginationReactive.itemCount = tmp.totalCount
  console.log(paginationReactive.itemCount)
  tableLoading.value = false
}
const codeFn = async (code: any, refValue: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: code
      }
    }
  })
  if (error) return message.error(error.message)
  refValue.value = res?.data?.map((it: any) => {
    return { value: it.dicCode, label: it.dicName }
  })
}
const keyUpDown = (e: any) => e.key == 'Enter' && (paginationReactive.page = 1,queryTableData())
onDeactivated(() => window.removeEventListener('keyup', keyUpDown, false))
watch(
  () => route.path,
  () => {
    if (route.path == '/collection/process/makeMenu/index') {
      queryTableData(true)
      window.addEventListener('keyup', keyUpDown, false)  // 回车
    } 
  },
  { deep: true, immediate: true }
)
const getTreeSelect = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listTreeAll',
    override: {
      params: {
        statusCode: 'A4901'
      }
    }
  })
  if (error) return message.error(error.message)
  banbenList.value = res.data
}
onMounted(() => {
  getTreeSelect()
  // codeFn('A45', statusList) //编目状态A45
  codeFn('A50', shenheList) //审核状态A50
  codeFn('A46', inStatusList) //入藏状态A46
  codeFn('A47', piciList) //藏品状态A47
  // codeFn('A34', banbenList) //版本类型A34
  codeFn('A30', collectFactionList) //征集方式A30
  // queryTableData()
})
</script>

<template>
  <TableView class="table">
    <template #form>
      <NForm
        :show-feedback="false"
        label-placement="left"
      >
        <NSpace justify="start">
          <NFormItem label="批次编号:">
            <NInput
              placeholder="请输入"
              v-model:value="form.batchCode"
            />
          </NFormItem>
          <NFormItem label="批次名称:">
            <NInput
              placeholder="请输入"
              v-model:value="form.batchName"
            />
          </NFormItem>
          <NFormItem label="编目状态:">
            <NSelect
              :options="statusList"
              v-model:value="form.catalogStatus"
              placeholder="请选择状态"
              clearable
              filterable
              style="width: 150px"
            />
          </NFormItem>
          <NFormItem label="征集方式:">
            <NSelect
              :options="collectFactionList"
              v-model:value="form.solicitMethodCode"
              placeholder="请选择征集方式"
              clearable
              filterable
              style="width: 150px"
            />
          </NFormItem>
          <NFormItem label="接收人:">
            <NInput
              placeholder="请输入"
              v-model:value="form.receiver"
            />
          </NFormItem>
          <NFormItem label="藏家:">
            <NInput
              placeholder="请输入"
              v-model:value="form.collector"
            />
          </NFormItem>
          <NFormItem>
            <NButton
              type="primary"
              style="width: 78px"
              ghost
              @click="queryTableDataBefore()"
            >
              查询
            </NButton>
          </NFormItem>
          <NFormItem>
            <NButton
              style="width: 78px"
              ghost
              type="primary"
              @click="reset()"
            >
              重置
            </NButton>
          </NFormItem>
          <!-- </NSpace> -->
        </NSpace>
      </NForm>
      <!-- <NSpace align="end"> -->
      <!-- 暂时隐藏 -->
      <!-- <NButton
            color="#5FB17F"
            ghost
            @click="handleDetail(null,true)"
            :disabled="dataListSelections.length ? false : true"
          >
            批量提交申请
          </NButton> -->
      <!-- <NButton
            color="#5FB17F"
            ghost
            @click="
              () =>
                router.push({
                  path: '/collection/process/initCompilation/processUpdate',
                  query: { id: dataListSelections?.join(','), type: 0 }
                })
            "
            :disabled="dataListSelections.length ? false : true"
          >
            批量入库
          </NButton> -->
      <!-- </NSpace> -->
    </template>

    <template #table="props">
      <NDataTable
        v-bind="props"
        :bordered="false"
        :row-key="rowKey"
        :columns="columns"
        :data="tableData"
        :loading="tableLoading"
        :checked-row-keys="dataListSelections"
        @update:checked-row-keys="selectionChangeHandle"
      />
    </template>

    <template #pagination>
      <NPagination
        show-size-picker
        show-quick-jumper
        :page-sizes="paginationReactive.pageSizes"
        :item-count="paginationReactive.itemCount"
        :page="paginationReactive.page"
        :page-size="paginationReactive.pageSize"
        @update:page="paginationReactive.onChange"
        @update:page-size="paginationReactive.onUpdatePageSize"
        :suffix="() => '页'"
      >
        <template #prefix>
          <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
        </template>
      </NPagination>
    </template>
  </TableView>
  <NModal
    :auto-focus="false"
    v-model:show="modalVisible"
  >
    <VDialogContent
      @close="modalVisible = false"
      @submit="againBack"
      title="警告"
    >
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        是否提当前编目进行审核？
      </div>
    </VDialogContent>
  </NModal>
</template>

<style scoped lang="scss">
.table {
  height: 100%;
  padding: 29px 30px 42px;
}
</style>
@/components/ButtonShowH/CreateH